<template>
    <div class="AdPutIn">
        <div class="title_bt">
            <div class="bt on" v-if="routerpage" @click="add"><i class="el-icon-caret-bottom"></i>新建物料</div>
            <div class="bt" v-if="routerpage" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('删除')">删除</div>
           <div class="bt" @click="search_show=!search_show">筛选 <i :class="search_show?'el-icon-caret-top':'el-icon-caret-bottom' "></i> </div>
             <div class="search">
                <el-input v-model="userForm.name" placeholder="请输入物料名称" @change="search()"></el-input>
                <div class="button" @change="search()"><i class="el-icon-search"></i></div>
             </div>
        </div>
          <div class="search_show" v-show="search_show">
            <el-row :gutter="20">
                <el-col :xs="8" :sm="8" :lg="5" :xl="3" class="card">
                    <div class="bt">类型：</div>
                    <div class="cardflex1">
                        <el-select v-model="userForm.type" placeholder="请输入类型">
                            <el-option
                                v-for="item in select_type" 
                                 @click.native="filterselect('type',item.id)"
                                :key="item.value"  
                                :label="item.value" 
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :xs="8" :sm="8" :lg="5" :xl="3" class="card">
                    <div class="bt">广告：</div>
                    <div class="cardflex1">
                        <el-select v-model="userForm.advert_id" filterable placeholder="请输入广告位">
                            <el-option
                                v-for="item in select_ad" 
                                 @click.native="filterselect('advert_id',item.id)"
                                :key="item.name"  
                                :label="item.name" 
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col> 
                  <el-col :xs="8" :sm="8" :lg="4" :xl="4" class="card">
                    <!-- <el-button type="primary" @click="search">确定</el-button> -->
                    <el-button type="danger" @click="reset">重置</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table  v-loading="loading" :data="tableData" style="width: 100%" class="tablebox"  ref="multipleTable"  @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="45">
            </el-table-column>
            <el-table-column prop="id" align="center" width="80" sortable label="编号" ></el-table-column>
            <el-table-column prop="name" align="center"  label="物料名称"></el-table-column>
            <el-table-column prop="name_y" align="center" width="250"  label="广告预览">
                <template slot-scope="{ row }">
                    <!-- <div v-if="isValidUrl(row.img)">
                        <el-image :src="row.img" fit="scale-down"></el-image>  
                    </div>
                    <p v-else>{{ row.img }}</p> -->
                    <p v-html="row.name_y" class="img_box"></p>
                </template>
            </el-table-column>
            <el-table-column prop="size" align="center"  width="200"   label="尺寸"></el-table-column>
            <el-table-column prop="type" align="center" width="100"  label="类型">
                <template slot-scope="{ row }">
                        <el-tag size='mini'
                         :type="row.type=='图片'? '' : row.type=='flash'? 'success' : row.type=='富媒体'?  'warning'  : 'info'">
                          {{row.type}}
                        </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="updated_at" align="center"  width="200"   label="修改时间"></el-table-column>
            <el-table-column class-name="status-col"  label="操作" width="250"  align="center"  fixed="right" v-if="routerpage">
                <template slot-scope="{ row }">
                    <kt-button icon="el-icon-edit"  size='mini'  label="修改" perms="sys:adminlist:edit" type="primary" @click="handleUpdate(row)"/>
                    <kt-button icon="el-icon-message"  size='mini' label="报告" perms="sys:adminlist:delete" type="success" @click="handleReport(row.id)"/>
                    <kt-button icon="el-icon-folder-add" size='mini' label="复制" perms="sys:adminlist:delete" type="warning" @click="handleCopy(row.id)"/>
                    <kt-button icon="el-icon-delete" size='mini' label="删除" perms="sys:adminlist:delete" type="danger" @click="handleDelete(row.id)"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
             :current-page=userForm.page
            :page-size=page_size
            layout="total, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
         <drawer-mateiral v-if="drawer_mateiral" :drawer='drawer_mateiral' :item="drawer_mateiral_item" :title="drawer_title_mateiral" @handleClose='handleClose_mateiral' @matterUpdate='matterUpdate'/>    <!--获取代码位得代码  -->
         <report type_data="report_material" title="物料报告" :drawer='drawer_report' :itemwl="report_arr_material" @handleClose_report='handleClose_report'/>    <!--我的报告  -->
    </div>
</template>
<script>
import KtButton from "@/components/elbutton"
import drawerMateiral from "@/components/el_drawer/material_from.vue"
import report from "@/components/el_drawer/report.vue"
import { axios_matter_index ,axios_adversense,axios_adver_open,axios_matter_update } from "@/api/infor";
export default {
    name:'Material',
    data(){
        return{
            loading:false,
            routerpage:false,
            page_size:1,
            total:1,
            search_show:true,  //显示搜索盒子
            userForm:{
                page:1,
                advert_id:'0',     //广告位ID
                type:0,  //	物料类型
                name:'',  //物料名称 顶部的搜索栏目
            },
            drawer_mateiral:false, //代码广告位
            drawer_title_mateiral:'新建',//新建修改广告位title
            drawer_mateiral_item:'',  //新建修改广告位数据
            drawer_report:false,   //报告
            report_arr_material:'',//报告数组
            select_advert_val:'全部',
            select_type_val:'全部',
            select_type:[
               {value:"全部",id:0},
               {value:"图片",id:1},
               {value:"flash",id:2},
               {value:"富媒体",id:3}
           ],
           select_ad:[{name:"全部",id:'0'}],
           tableData: [], //表格的数据
          multipleSelection: [],
        }
    },
    created(){
         this.getdatalist("refresh")
        this.axiosAdversense();
    },
     components:{
        KtButton,
        drawerMateiral,
        report
    },
    props:{
        // drawer_mateiral_tabler,
    },
    watch:{
        $route:{
            handler(nv){
                if(nv.name=='Material'){
                    this.routerpage=true;
                }
            },
            immediate:true
        },
        multipleSelection(ov){
            console.log(ov)
        }
        
    },
    mounted() {
    },
    methods:{
        isValidUrl(url) {
            const regex = /^https?:\/\/(?:www\.)?[^\s/$.?#].[^\s]*/;
            return regex.test(url);
        },
        search(){
           this.getdatalist("refresh")
        },
          // 下拉框选项搜索
        filterselect(){
            // if(type=="advert_id"){this.userForm.advert_id=e}
            // if(type=='type'){this.userForm.type=e}
            this.getdatalist("refresh")
        },
        reset(){
            this.search_show=true;
            this.select_advert_val='全部',
            this.select_type_val='全部',
             this.getdatalist("reset")
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
             this.userForm.page=val;
             this.getdatalist()
        },
         // 删除物料
        handleDelete(id){
             this.$confirm('确定要删除此条数据吗？','确认信息',{customClass:'layeralterelbox'}) .then(()  => {
                this.filterdata({ids:[id],status:0,type:2},'删除')
            }).catch(()  => {});
        },
        // 复制
        handleCopy(id){
            this.$confirm('确定要复制此条数据吗？','确认信息',{customClass:'layeralterelbox'}) .then(()  => {
                axios_matter_update({matter_type:3,id:id}).then((res) => {
                    if(res.data.code==1){
                        this.$message({message:'已经复制成功', type: 'success'});
                        this.getdatalist("refresh")
                    }
                }).catch((e )=>{
                    this.$message({message:e, type: 'warning'});
                })
            }).catch(()  => {});
        },
             //操作列表选项
         filterdata(page,val){
            axios_adver_open(page).then((res) => {
                if(res.data.code==1){
                    this.$message({message:val+'已经操作成功', type: 'success'});
                    this.getdatalist()
                    this.multipleSelection = [];   // 清空选中项
                }
            }).catch((e )=>{
                this.$message({message:e, type: 'warning'});
            })
        },
        handleReport(id){
            this.$message('显示报告 '+id);
            this.report_arr_material=id
             this.drawer_report=true;
        },
        //关闭广告位代码
        handleClose_mateiral(){
             this.drawer_mateiral=false;
           
         },
         matterUpdate(boolean){
            console.log(boolean)
            if(boolean){
               this.getdatalist() //修改后更新列表
            }
         },
        //  关闭报告
        handleClose_report(){
             this.drawer_report=false;
         },
        beforehandleCommand(row,child){
            return {'row':row,'child':child}
        },
         handleCommand(command) {
            if(command.child==1){   //操作所在网址
               console.log(command.row)
            }
        },
        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val;
            this.determine();
        },
        add(){
            this.drawer_title_mateiral='新建';
            this.drawer_mateiral_item='' 
            this.drawer_mateiral=true; 
        },
          // 修改用户
          handleUpdate(item){
             this.drawer_title_mateiral='修改'; 
             this.drawer_mateiral_item=item;
             this.drawer_mateiral=true; 

        },
        removeDuplicates(arr1, arr2) {
          const uniqueElements = new Set([...arr1, ...arr2]);
        return Array.from(uniqueElements);
        },
        determine(){
            this.$emit('multipleSelection', this.multipleSelection);
        },
        statelist(val){
            let  state=''
             switch (val) {
                case "删除":
                    state =0;
                    break;
                case "启用":
                    state = 1;
                    break;
                case "停用":
                    state = 4;
                    break;
            }
            if(this.multipleSelection.length<1){
                this.$message('请勾选的代码位');
            }else{
                this.$confirm('确定要'+val+'勾选的物料吗？','确认'+val+'',{customClass:'layeralterelbox'}) .then(()  => {
                     let arrid=[];
                   this.multipleSelection.forEach(row => {
                         let id=row.id
                        arrid.push(id)
                    });
                     this.filterdata({ids:arrid,status:state,type:2},val)
                }).catch(()  => {});
            } 

        },
           // 获取列表数据
        getdatalist(type){
            if(type=="refresh"){
                this.userForm.page=1;
            }
            if(type=="reset"){
                this.userForm={
                    page:1,
                    advert_id:'',   
                    type:0,  
                    name:''
                }
            }
            this.loading=true;
            axios_matter_index(this.userForm).then((res) => {
                if(res.data.code==1){
                    this.loading=false;
                    this.tableData=res.data.data;
                    this.page_size=res.data.page_size;
                    this.total=Number(res.data.total);
                }
            }).catch(( )=>{})
        },
        // 获取代码位的分类
        axiosAdversense(){
            axios_adversense({model:1,flow_type:0}).then((res) => {
                  this.select_ad.push(res.data.data);
                 this.select_ad=this.select_ad.flat(Infinity)
            }).catch(( )=>{})
           
        },
    }
}
</script>
<style lang="scss">
.el-table .cell .el-button{padding: 10px 5px;}
.el-table .cell .el-button + .el-button{
  margin-left: 0px;
}
.img_box {
    embed , img{
        width: auto;
        max-height: 100px;
        max-width:230px ;
    }
    img{
        height: auto;
        object-fit: cover;
    }
}
</style>